<template>
  <div class="partner">
    <div class="links">
      <div style="height: 10px"></div>
      <div class="model-title">
        <div class="model">常用链接</div>
      </div>
      <div class="model-block"></div>
      <div class="link-content">
        <h3>
          <span @click="open">网上党校</span>
          <span>安全稳定</span>
        </h3>
        <div class="gc">
          <el-select
            v-model="value"
            placeholder="学院合作机构"
            @change="change(value)"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="values" placeholder="院系导航">
            <el-option
              v-for="i in lists"
              :key="i.id"
              :label="i.label"
              :value="i.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          value: "http://jdxy.jgsu.edu.cn/jdyjs/",
          label: "机电工程研究所",
        },
        {
          id: 2,
          value: "./",
          label: "吉安市仿生包装工程技术研究中心",
        },
        {
          value: "http://jdxy.jgsu.edu.cn/jdyygcjs/",
          id: 3,
          label: "吉安市液压工程技术研究中心",
        },
        {
          value: "/",
          id: 4,
          label: "吉安市数控机床研究中心",
        },
        {
          value: "http://jdxy.jgsu.edu.cn/gcxl/",
          id: 5,
          label: "工程训练实验教学示范中心",
        },
        {
          id: 6,
          value: "/",
          label: "江西省机械制造与光机电一体化茶品研究合作培养示范基地",
        },
      ],
      values: "",
      lists: [
        {
          id: 1,
          value: "1",
          label: "政法学院",
        },
        {
          id: 2,
          value: "2",
          label: "马克思主义学院",
        },
        {
          id: 3,
          value: "3",
          label: "人文学院",
        },
        {
          id: 4,
          value: "4",
          label: "外国语学院",
        },
        {
          id: 5,
          value: "5",
          label: "商学院",
        },
        {
          id: 6,
          value: "6",
          label: "数理学院",
        },
        {
          id: 7,
          value: "7",
          label: "机电工程学院",
        },
        {
          id: 8,
          value: "8",
          label: "建筑工程学院",
        },
        {
          id: 9,
          value: "9",
          label: "机电工程学院",
        },
        {
          id: 10,
          value: "10",
          label: "化学化工学院",
        },

        {
          id: 11,
          value: "11",
          label: "生命科学学院",
        },
        {
          id: 12,
          value: "12",
          label: "医学院",
        },
        {
          id: 13,
          value: "13",
          label: "护理学院",
        },
        {
          id: 14,
          value: "14",
          label: "体育学院",
        },
        {
          id: 15,
          value: "15",
          label: "国防生学院",
        },
        {
          id: 16,
          value: "16",
          label: "培训学院",
        },
        {
          id: 17,
          value: "17",
          label: "继续教育学院",
        },
      ],
      value: "",
    };
  },
  methods: {
    open() {
      window.open(`http://jdxy.jgsu.edu.cn/jdwsdx_a/`);
    },
    change(item) {
      // console.log(item);
      // console.log(this.$router);
      window.open(item);
      // this.$router.push({
      //   url: item,
      // });
    },
  },
};
</script>

<style lang="less">
clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.partner {
  width: 100%;
  min-height: 190px;
  background: #3b4652;
  margin-top: 70px;
  .links {
    max-width: 1200px;
    margin: 0 auto;
    .model-title {
      width: 100%;
      height: 54px;
      line-height: 54px;
      border-bottom: 1px solid #5c646e;
      .model {
        width: 96px;
        font-size: 24px;
        float: left;
        color: #fff;
      }
    }
    .model-block {
      float: left;
      width: 38px;
      height: 3px;
      background: #fbc404;
      position: relative;
      top: -2px;
      z-index: 1;
      margin-bottom: -2px;
    }
    .link-content {
      margin-top: 10px;
      color: #fff;
      .el-select {
        margin-right: 20px;
      }
      h3 span {
        display: inline-block;
        padding: 10px;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all 0.7s ease;
        margin-right: 20px;
      }
      h3 span:hover {
        background: #4481f6;
        color: white;
        border-radius: 20px;
      }
    }
  }
}
</style>